<template>
    <div >
        <div id="jx-contain">

            <iframe :width="wid" :height="hei" allowfullscreen="true" allowtransparency="true" class="coursewareBox" src="../../../../static/generic/web/viewer.html?file=./../../../static/123.pdf" frameborder="0"></iframe>
            <div class="sideBox">
                <ul>
                    <li @click="dialogVisible2 = true" ><i class="iconfont icon-shipin1"></i>视频</li>
                    <li @click="openNoteWindow"><i class="iconfont icon-ico_compile_thick"></i>笔记</li>
                </ul>
            </div>
        </div>
        <!-- 视频盒子 -->
        <el-dialog
        title="视频"
        :visible.sync="dialogVisible2"
        width="1230px"
        >
       <video id="video" style="height:602px;" autoplay controls class="videoShow" :src="videoUrl" ></video>
        </el-dialog>
        <!-- 笔记盒子 -->
        <div  class="el-dialog__wrapper" id="onlyDialog">
            <div role="dialog" aria-modal="true" aria-label="笔记" class="el-dialog" style="margin-top: 15vh; width: 490px;">
                <div class="el-dialog__header">
                    <span class="el-dialog__title">笔记</span>
                    <button type="button" aria-label="Close" class="el-dialog__headerbtn"><i  @click="closeNoteWindow" class="el-dialog__close el-icon el-icon-close"></i></button>
                </div>
                <div class="el-dialog__body">
                    <textarea id="noteVal" v-model="noteVal" style="width: 450px; height: 200px;"></textarea>
                </div>
                <div class="el-dialog__footer">
                    <span  class="dialog-footer">
                        <button @click="noteEvent" class="button-style saveNote">保存</button>
                    </span>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
    import $ from "jquery";

    export default{
        data(){
            return {
                wid:0,
                hei:0,
                videoUrl:'',
                dialogVisible1:false,
                dialogVisible2:false,
                dialogVisible3:false,
                dialogVisible4:false,
                noteVal:''
            }
        },
        methods:{
            closeNoteWindow(){
                $("#onlyDialog").hide();
            },
            openNoteWindow(){
                $("#onlyDialog").show();
            },
            noteEvent(){

            },
            issueEvent(){

            }
        },
        mounted(){
            let screenWidth=document.documentElement.clientWidth;
            let screenHeight=document.documentElement.clientHeight;
            this.wid = screenWidth;
            this.hei = screenHeight-8;
        }
    }
</script>
<style scoped lang="scss">
 @import "./../../../styles/ypublic.scss";
// 笔记盒子 提问盒子
    #onlyDialog{
        height: 396px;
        width: 490px;
        position: absolute;
        left: initial;
        top: 150px;
        bottom: initial;
        right: 95px;
        display: none;
    }
    #issueDialog{
        width: 410px;
        position: absolute;
        left: initial;
        top: 210px;
        bottom: initial;
        right: 95px;
    }
    #onlyDialog .el-dialog,#issueDialog  .el-dialog{
        border-radius: 5px;
        margin: 0!important;
        padding: 0;

    .el-dialog__header {
        background: $white;

        height: auto;
        line-height:initial;
        padding: 20px 20px 10px;

        .el-dialog__title {
            color: #070e28;
            line-height: 24px;
            font-size: 16px;
            float: left;
        }
    }

    .el-dialog__headerbtn {
        top: 20px;

        .el-dialog__close {
            color: #070e28;

            &:hover {
                color: #070e28;
            }
        }
    }
    #noteVal{
        overflow: auto;
    }
}
    .saveNote{
        width: 90px;
        height: 32px;
        margin-right: 180px;
    }
    //主体
    #jx-contain{
        position: relative;
        .sideBox{
            position: absolute;
            top:50px;
            right:25px;
            width: 60px;
            height: 160px;
            background: #1c1f21;
            color: $white;
            text-align: center;
            border-radius: 5px;
            li{
                height: 36px;
                width: 25px;
                display: block;
                font-size: 12px;
                margin: 20px auto 44px;
                position: relative;
                cursor: pointer;
                .iconfont{
                    display: block;
                    margin-bottom: 8px;
                    font-size: 19px;

                }

            }
        }

    }
</style>
